<template>
  <div>
    <h3>赛事发布方：{{ gameInfo.organizationUnitDisplayName }}</h3>
    <el-form style="min-height: 480px;" label-width="100px" size="mini" @submit.native.prevent>
      <el-row :gutter="20">
        <el-col :span="12" class="form_item">
          <el-form-item label="赛事标题">
            <span>{{ gameInfo.name }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="form_item">
          <el-form-item label="认证等级">
            <span>{{ gameInfo.level && gameInfo.level.name }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" class="form_item">
          <el-form-item label="地区选择">
            <span>{{ addressDataForCheck(gameInfo) }}</span>
          </el-form-item>
        </el-col>
        <!-- League: 联赛 -->
        <el-col v-if="gameInfo.typeCode === 'League'" :span="12" class="form_item">
          <el-form-item label="报名日期">
            <span>{{ gameInfo.entryStartTime && gameInfo.entryStartTime.substring(0, 10) }}</span> ~
            <span>{{ gameInfo.entryEndTime && gameInfo.entryEndTime.substring(0, 10) }}</span>
          </el-form-item>
        </el-col>
        <el-col v-else :span="12" class="form_item">
          <el-form-item label="比赛地址">
            <span>{{ gameInfo.address }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="gameInfo.typeCode !== 'League'" :gutter="20">
        <el-col :span="12" class="form_item">
          <el-form-item label="报名日期">
            <span>{{ gameInfo.entryStartTime && gameInfo.entryStartTime.substring(0, 10) }}</span> ~
            <span>{{ gameInfo.entryEndTime && gameInfo.entryEndTime.substring(0, 10) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="form_item">
          <el-form-item label="比赛日期">
            <span>{{ gameInfo.startTime && gameInfo.startTime.substring(0, 10) }}</span> ~
            <span>{{ gameInfo.endTime && gameInfo.endTime.substring(0, 10) }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" class="form_item">
          <el-form-item label="联系电话">
            <span>{{ gameInfo.contactPhoneNumber }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="form_item">
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content" style="width: 300px;">
              <span>{{ prefixRoute }}{{ gameInfo.route }}{{ gameInfo.tenantId || user.tenantId }}</span>
            </div>
            <el-form-item label="二级域名">
              <div class="gl_ellipsis">
                <span>{{ prefixRoute }}{{ gameInfo.route }}</span>
                <span v-if="gameInfo.tenantId || user.tenantId">_{{ gameInfo.tenantId || user.tenantId }}</span>
              </div>
            </el-form-item>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8" class="form_item">
          <el-form-item label="报名须知">
            <span v-if="gameInfo.entryNotice">《报名须知》</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form_item">
          <el-form-item label="免责声明">
            <span v-if="gameInfo.disclaimerNotice">《免责声明》</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form_item">
          <el-form-item label="上传规程">
            <span v-if="gameInfo.regulation">《上传规程》</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="min-height: 100px;">
        <el-col :span="8" class="form_item">
          <el-form-item label="上传背景">
            <div class="upload_game_img">
              <img v-if="gameInfo.backgroundImage" class="show_img" :src="getStaticFileUrl(gameInfo.backgroundImage)" alt="">
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form_item">
          <el-form-item label="上传logo">
            <div class="upload_game_img">
              <img v-if="gameInfo.logoImage" class="show_img" :src="getStaticFileUrl(gameInfo.logoImage)" alt="">
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="form_item">
          <el-form-item label="上传封面图">
            <div class="upload_game_img">
              <img v-if="gameInfo.coverImage" class="show_img" :src="getStaticFileUrl(gameInfo.coverImage)" alt="">
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="competitionApprove.approveResult" :gutter="20">
        <el-col :span="24">
          <el-form-item label="审核结果">
            <span>{{ competitionApprove.approveResult && competitionApprove.approveResult.name }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="competitionApprove.approveResult && competitionApprove.approveResult.code === 'ApproveFailed'" :gutter="20">
        <el-col :span="24">
          <el-form-item label="驳回原因">
            <span>{{ competitionApprove.comment && competitionApprove.comment }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="gl_mt_20">
      <el-col :span="24" align="center">
        <template v-if="competitionApprove.approveStatus && competitionApprove.approveStatus.code === 'Approved'">
          <el-button type="primary" size="mini">已审核</el-button>
        </template>
        <template v-else>
          <el-button type="warning" size="mini" @click="openApprove()">审核</el-button>
        </template>
        <el-button type="default" size="mini" @click="goBack()">返回</el-button>
      </el-col>
    </el-row>
    <!-- 审批 -->
    <el-dialog
      class="gl_dialog_TitleLine"
      width="520px"
      title="状态审核"
      :visible.sync="approveDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <el-form ref="approveVO" :model="approveVO" label-width="80px" size="mini" @submit.native.prevent>
        <el-form-item label="状态审核">
          <el-select v-model="approveVO.approveResultCode" placeholder="请选择审核状态" style="width: 100%;">
            <el-option v-for="item in dict.competitionApproveProcessResult" :key="item.code" :value="item.code" :label="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="驳回原因">
          <el-input
            v-model="approveVO.comment"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入驳回原因"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="approveDialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="updateGameApproveStatus()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { SiSTKWEventsManagementUpdateCompetitionApproveInput } from '@/lib/form/game/swaggerForm';
import {
  api_GET_EventsManagementCompetitionApproveCompetitionDetailsApproveId,
  api_POST_EventsManagementCompetitionApproveIdApprove
} from '@/extend/api/gameswaggerApi/app';
export default {
  data() {
    return {
      prefixRoute: '',
      gameInfo: {},
      competitionApprove: {},
      /* 审批相关 */
      approveDialogVisible: false,
      approveVO: new SiSTKWEventsManagementUpdateCompetitionApproveInput()
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache,
      user: state => state.user
    })
  },
  created() {
    this.getDict();
    this.getDictByType(['district']);
    this.approveId = this.$route.params.competitionApproveId;
    console.log(this.approveId);
    this.prefixRoute = `${location.origin}/game.html#/home/`;
    this.getGameInfo();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    getGameInfo() {
      api_GET_EventsManagementCompetitionApproveCompetitionDetailsApproveId(this.approveId).then(res => {
        this.gameInfo = res.competition || {};
        this.competitionApprove = res.competitionApprove || {};
        console.log(this.gameInfo);
      }, () => {
        this.$message({ type: 'error', message: '获取赛事详情失败！' });
      });
    },
    addressDataForCheck (data) {
      const _provinceCode = data.provinceCode;
      const _cityCode = data.cityCode;
      const _countyCode = data.countyCode;
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      return `${_provinceData ? _provinceData.name : ''} ${_cityData ? _cityData.name : ''} ${_countyData ? _countyData.name : ''}`;
    },
    // 点击审核
    openApprove() {
      this.approveVO = new SiSTKWEventsManagementUpdateCompetitionApproveInput();
      this.approveVO.approveResultCode = this.gameInfo && this.gameInfo.approveResultCode || 'ApproveSuccess';
      this.approveDialogVisible = true;
    },
    // 更新赛事审核状态
    updateGameApproveStatus() {
      if (this.approveVO.approveStatus === 'ApproveFailed' && !this.approveVO.approveRemark) {
        this.$message({ type: 'error', message: '审核状态为审核不通过时，必须填写驳回原因' });
        return;
      }
      api_POST_EventsManagementCompetitionApproveIdApprove(this.approveId, this.approveVO).then(res => {
        this.$message({ type: 'success', message: '审核成功！' });
        this.approveDialogVisible = false;
        this.getGameInfo();
      }, error => {
        this.$message({ type: 'error', message: '审核失败！' + (error.error && error.error.message || '') });
      });
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    goBack() {
      this.$router.push({
        name: 'IdentifyApprove'
      });
    }
  }
};
</script>
<style scoped>
.upload_game_img {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.upload_game_img.border {
  border: 1px dotted #DCDFE6;
}
.upload_game_img:hover {
  border-color: #409eff;
}
.upload_game_img .show_img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
  vertical-align: top;
}
</style>
